<template>
  <view class="bg">
    <view class="task_bg">
      <view class="task_one">
        <view class="task_left_top">
          <view class="task_round">
            <image src="../../../static/images/common/task.png" mode=""></image>
          </view>
          <view class="name">{{ top.name }}</view>
        </view>
        <view class="task_content">
          <view class="task_name">
            <view class="task_left">任务名称</view>
            <view class="task_right nameFont">{{ top.rwmc }}</view>
          </view>
          <view class="task_child">
            <view class="task_test">
              <view class="task_left">任务内容</view>
              <view class="task_right childFont">{{ top.rwnr }}</view>
            </view>
          </view>
        </view>
      </view>

      <view
        v-for="(item, index) in taskArr"
        :key="index"
        class="task_one"
        @tap="toDetail(index)"
      >
        <view class="task_content">
          <!-- <view class="task_name">
            <view class="task_left">子事项(1)</view>
            <view class="task_right nameFont">{{ item.rwmc }}</view>
          </view> -->
          <view class="task_child">
            <view class="task_test">
              <view class="task_left">子事项内容</view>
              <view class="task_right childFont">{{ item.zsxnr }}</view>
            </view>
            <view class="task_test">
              <view class="task_left">单位名称</view>
              <view class="task_right childFont">{{ item.xbdw }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="sub_title" v-show="top.imp == 1">考核综合排名</view>
      <view class="task_one" v-show="top.imp == 1" @tap="ranking()">
        <view class="rankTable">
          <view class="rankTh">
            <view>单位</view>
            <view class="w50">排名</view>
          </view>
          <view class="rankTr" v-for="(item, index) in rankArr" :key="index">
            <view class="font1">{{ item.name }}</view>
            <view class="no13 w50" v-show="item.pm <= 3">{{ item.pm }}</view>
            <view class="no4 w50" v-show="item.pm > 3">{{ item.pm }}</view>
          </view>
        </view>
      </view>

      <view class="sub_title" v-show="recordArr.length > 0">流程记录</view>
      <view class="task_one" v-show="recordArr.length > 0">
        <view class="line"></view>
        <view
          class="record_flex"
          v-for="(item, index) in recordArr"
          :key="index"
        >
          <view class="record_flex_40">
            <view class="round">
              <image
                src="../../../static/images/common/plane.png"
                mode=""
              ></image>
            </view>
          </view>
          <view class="record_flex_1">
            <view class="record_top">
              <view class="flex_1 name_font">{{ item.content }}</view>
              <!-- <view class="flex_2">
                <image
                  src="../../../static/images/common/right.png"
                  mode=""
                ></image>
                <view class="center_font">{{ item.record }}</view>
                <image
                  src="../../../static/images/common/right.png"
                  mode=""
                ></image>
              </view>
              <view class="flex_right name_font">{{ item.name2 }}</view> -->
            </view>
            <view class="time">{{ item.time }}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 批转 -->
    <u-modal v-model="show" :show-cancel-button="true" :show-title="false">
      <view class="popupModel">
        <view class="task_left_top">
          <view class="task_round">
            <image
              src="../../../static/images/common/plane.png"
              mode=""
            ></image>
          </view>
          <view class="name">批转</view>
        </view>
        <view class="popupContent">
          <view class="Content">
            <view class="name">经办人</view>
            <view></view>
          </view>
        </view>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { getSubtasklist, getTaskrecordlog } from "../../../request/dcxt";
export default {
  data() {
    return {
      top: {
        name: "",
        rwmc: "",
        rwnr: "",
        imp: "",
      },
      taskArr: [],
      keyword: "",
      show: false,
      content: "东临碣石，以观沧海",
      recordArr: [],
      rankArr: [
        {
          name: "民政局",
          pm: 1,
        },
        {
          name: "住建局",
          pm: 2,
        },
        {
          name: "司法局",
          pm: 3,
        },
        {
          name: "水利局",
          pm: 4,
        },
        {
          name: "文明办",
          pm: 5,
        },
        {
          name: "发展与改革局",
          pm: 6,
        },
        {
          name: "商务局",
          pm: 7,
        },
        {
          name: "城管局",
          pm: 8,
        },
        {
          name: "塘前乡",
          pm: 9,
        },
      ],
    };
  },
  onLoad(option) {
    console.log(option.info);
    this.top = {
      name: JSON.parse(option.info).name,
      rwmc: JSON.parse(option.info).rwmc,
      rwnr: JSON.parse(option.info).rwnr,
      imp: JSON.parse(option.info).imp,
    };
    this.getData(JSON.parse(option.info).sysId);
  },
  methods: {
    plane() {
      this.show = true;
    },
    transact() {
      uni.navigateTo({
        url: "/pages/dcxt/transact/index",
      });
    },
    toDetail(index) {
      var _this = this;
      uni.navigateTo({
        url:
          "/pages/dcxt/task/index?info=" + JSON.stringify(_this.taskArr[index]),
      });
    },
    ranking() {
      uni.navigateTo({
        url: "/pages/dcxt/ranking/index",
      });
    },
    getData(id) {
      var params = {
        loginerId: uni.getStorageSync("loginId"),
        taskMainId: id,
      };
      getSubtasklist(params).then((res) => {
        console.log(res.data.data)
        var result = res.data.data;
        var arr = [];
        for (let i = 0; i < result.length; i++) {
          //
          arr.push({
            zsxnr: result[i].taskSubName,
            xbdw:
              result[i].deptName +
              "_" +
              (result[i].unitType == 1 ? "牵头" : "协办"),
            sysId: result[i].sysId,
            type: result[i].type,
            rwlc: result[i].timeRound,
            rwsx: result[i].timeLimit,
            zt: result[i].state,
            ztType: result[i].state,
            name: this.top.name,
            zsx: result[i].taskSubName,
            rwmc: result[i].taskSubName,
            taskUnitId: result[i].sysId,
            taskSubId: result[i].taskSubId,
            createUser: result[i].createUser,
            imp: result[i].imp,
          });
        }
        this.taskArr = JSON.parse(JSON.stringify(arr));
        this.recordArr = [];
        for (let i = 0; i < this.taskArr.length; i++) {
          if (this.taskArr[i].type == 1) {
            getTaskrecordlog({ taskUnitId: this.taskArr[i].sysId }).then(
              (res) => {
                var reaultArr = res.data.data;
                for (let j = 0; j < reaultArr.length; j++) {
                  this.recordArr.push({
                    content: reaultArr[i].content,
                    time:
                      reaultArr[i].createDate + " " + reaultArr[i].createTime,
                  });
                }
              }
            );
          }
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.top_search {
  width: 100vw;
  height: 120rpx;
  background-color: #3988ff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  .search_screening {
    margin-left: 2%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }

    .font {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

.popupModel {
  position: relative;
  padding-top: 48rpx;

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 150rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 999;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .popupContent {
    padding: 24rpx;

    .Content {
      width: 100%;
      display: flex;
      align-items: center;

      .name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }
    }
  }
}

.task_bg {
  // margin-top: 120rpx;
  .rankTable {
    .rankTh {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
      padding: 30rpx 76rpx;

      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8e9cb3;
    }

    .rankTr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
      padding: 30rpx 76rpx;

      .font1 {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #272b32;
      }

      .no13 {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #faad33;
      }

      .no4 {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #8e9cb3;
      }
    }

    .w50 {
      width: 60rpx;
      text-align: center;
    }

    .rankTr:last-child {
      border-bottom: none;
    }
  }

  .task_one {
    background-color: rgba(255, 255, 255, 1);
    padding: 24rpx;
    position: relative;
    margin-bottom: 40rpx;
    box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
    border-radius: 24rpx 8rpx 8rpx 8rpx;

    .line {
      width: 1rpx;
      height: calc(100% - 48rpx);
      // background-color: pink;
      position: absolute;
      left: 44rpx;
      top: 24rpx;
      border-left: 1rpx dashed rgba(48, 116, 255, 0.1);
      // z-index: 5;
    }
  }

  .record_flex {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40rpx;

    .record_flex_1 {
      flex: 1;
      padding-left: 25rpx;

      .record_top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 10rpx;

        .flex_1 {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;

          image {
            width: 16rpx;
            height: 14rpx;
          }
        }

        .flex_2 {
          flex: 1.5;
          display: flex;
          align-items: center;
          justify-content: space-between;

          image {
            width: 16rpx;
            height: 14rpx;
          }
        }

        .flex_right {
          display: flex;
          justify-content: flex-end;
          flex: 1;
        }

        .center_font {
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #3074ff;
        }

        .name_font {
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #272b32;
        }
      }

      .time {
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #8e9cb3;
      }
    }

    .record_flex_40 {
      width: 40rpx;

      .round {
        width: 40rpx;
        height: 40rpx;
        background: linear-gradient(-30deg, #3074ff 0%, #41baff 100%);
        box-shadow: 2rpx 3rpx 12rpx 0rpx rgba(48, 116, 255, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999999;

        image {
          width: 16rpx;
          height: 16rpx;
        }
      }
    }
  }

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 200rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 5;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .task_content {
    width: 100%;
    margin-top: 40rpx;

    .task_btnArr {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 40rpx;
    }

    .task_btn {
      background: #3074ff;
      border-radius: 4rpx;
      padding: 8rpx 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      .more {
        width: 24rpx;
        height: 6rpx;
        margin-right: 10rpx;
      }

      .font {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .btn_color1 {
      background-color: rgba(231, 233, 240, 1);
    }

    .btn_color2 {
      background-color: rgba(248, 95, 120, 1);
    }

    .task_name {
      display: flex;
      padding-bottom: 40rpx;
    }

    .task_child {
      padding: 20rpx 0;
      border-top: 1rpx solid rgba(231, 233, 240, 1);
      // border-bottom: 1rpx solid rgba(231, 233, 240, 1);
    }

    .task_test {
      display: flex;
      margin: 20rpx 0;
    }

    .task_left {
      flex: 2;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8e9cb3;
    }

    .nameFont {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #272b32;
    }

    .task_right {
      flex: 7;
      display: flex;
      align-items: center;

      .childFont {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }

      .zt_type1 {
        margin-left: 10rpx;
        background: #f85f78;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .zt_type2 {
        margin-left: 10rpx;
        background: rgba(250, 173, 51, 1);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
